<template>
  <div class="virusDetail">
    <u-image
      width="100%"
      height="400rpx"
      border-radius="10rpx"
      :src="virusInfo.image"
      mode="aspectFill"
      @click="previewImage(virusInfo.image)"
    ></u-image>

    <MarkHead :title="`水稻${virusInfo.virusName}简介：`" />

    <view class="desc">
      <text selectable>英文名称：{{ virusInfo.enName }}</text>
    </view>
    <view class="desc">
      <text selectable>其他名称：{{ virusInfo.otherName }}</text>
    </view>
    <view class="desc">
      <text selectable>病害简介：{{ virusInfo.brief }}</text>
    </view>

    <MarkHead title="防治方法：" />
    <view class="desc">
      <text selectable>{{ virusInfo.prevent }}</text>
    </view>
  </div>
</template>

<script setup>
import { onLoad } from "@dcloudio/uni-app"
import { ref } from "vue"
const virusInfo = ref({})

onLoad((options) => {
  virusInfo.value = JSON.parse(decodeURIComponent(options.virusInfo))
})

// 预览图片
const previewImage = (imageUrl) => uni.previewImage({ urls: [imageUrl] })
</script>

<style lang="scss" scoped>
.virusDetail {
  box-sizing: border-box;
  padding: 30rpx;
  min-height: 100vh;
  .desc {
    color: $uni-color-paragraph;
    font-size: 30rpx;
  }
}
</style>
